import { useLayoutEffect, useState } from 'react';
import { Mask } from 'antd-mobile';
import clsx from 'clsx';
import styles from './index.module.less';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Button, Space, Toast } from 'antd-mobile'
import { useRecoilState } from 'recoil';
import { GameRulesMaskState } from '../../../state';

interface Props {
  visible: boolean;
  onClose: (value?: number) => void;
}

const HowToPlayMask: React.FC<Props> = ({ visible, onClose }) => {
  const [, setRoundDetailMaskState] = useRecoilState(GameRulesMaskState);

  const copyFn = () => {

  }
  return (
    <Mask
      opacity={0.3}
      visible={visible}
      onMaskClick={() => onClose()}
    >
      <div
        className={styles.GameInfoMask}
      >
        <div className={styles.titleBox}>
          HOW TO PLAY
          <i className={styles.icon} onClick={() => { onClose() }}></i>
        </div>
        <div className={styles.content}>
          <div className={styles.flexBox}>
            <div className={styles.logo}></div>
            Mines
          </div>
          <div className={styles.howImg}></div>
          <p className={styles.text}>
            Each tile hides either a star or a mine.
          </p>
          <p className={styles.text}>
            Increase the total number of stars for bigger odds and higher rewards.
            You can cash out after each turn, or try for increased winnings.
          </p>
          <div className={styles.whats} onClick={() => {
            setRoundDetailMaskState(true);
          }}>What is Provably Fair</div>
        </div>
      </div>
    </Mask>
  );
};

export default HowToPlayMask;
